<template>
    <div class="like">
        <div class="bar">
            <van-nav-bar title="我的收藏" left-arrow>
                <template #left>
                    <div class="icon" @click="onClickLeft">
                        <img class="auto-img" src="../../public/images/songList/向左.png" alt="">
                    </div>
                </template>
            </van-nav-bar>
        </div>
        <div class="select">
            <van-tabs v-model="activeIndex" background="#160742" color="#51EDE7" title-active-color="#51EDE7"
                title-inactive-color="#fff" swipeable>
                <van-tab title="歌曲">
                    <div class="thrItem">
                        <div class="allplay">
                            <div class="allplayTwo">
                                <div class="img">
                                    <img class="auto-img" src="../../public/images/songList/播放.png" alt="">
                                </div>
                                <div class="allplayText">全部播放</div>
                            </div>
                            <div class="allplayTwo">
                                <div class="img2">
                                    <img class="auto-img" src="../../public/images/songList/排序.png" alt="">
                                </div>
                                <div class="img2 img3">
                                    <img class="auto-img" src="../../public/images/songList/列表.png" alt="">
                                </div>
                            </div>
                        </div>

                        <div class="songListAll">
                            <div class="songListItem" v-for="(item, index) in likeSongData" :key="index">
                                <songListItem :song-data="item" :index="index" :is-play-icon="true"></songListItem>
                            </div>


                        </div>

                    </div>
                </van-tab>
                <van-tab title="专辑">内容 2</van-tab>
                <van-tab title="歌单">
                    <div class="songListDetail">
                        <div class="songListDetailNum"><span>{{ numSongList }}</span>张歌单</div>
                        <div v-for="(item, index) in recommendSongData" :key="index">
                            <songListItem2 :song-list-data="item"
                                @getSonDetail="getSonDetail(item.id, item.coverImgUrl)"></songListItem2>
                        </div>



                        <div class="recommendListMore">
                            <div class="recommendListMoreTitle">为你精选更多歌单</div>
                            <div class="recommendListMoreItem">
                                <div class="recommendItem" v-for="(item, index) in likeRecommendListData" :key="index">
                                    <div class="recommendPic">
                                        <img class="auto-img" :src="item.coverImgUrl" alt="">
                                    </div>
                                    <div class="recommendText">
                                        <span class="recommendText">{{ item.name }}</span>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<script>
import recommendSong from '@/components/recommendSongs.vue';
import songListItem from '@/components/songListItem.vue';
import songListItem2 from '@/components/songListItem2.vue'
import { mapMutations } from 'vuex';
export default {
    name: "Like",
    data() {
        return {
            activeIndex: 2,
            checked: true,
            recommendSongData: "",
            likeSongData: "",
            recommendSongId: "",
            likeRecommendSongData: "",
            likeRecommendListId: "",
            likeRecommendListData: "",
            numSongList: 0
        }
    },
    components: {
        recommendSong,
        songListItem,
        songListItem2
    },
    created() {
        let loginInfo = window.localStorage.getItem('loginInfo')
        let likeSongList = window.localStorage.getItem('likeSongList')
        let likeSong = window.localStorage.getItem('likeSong')
        if (loginInfo) {
            let loginInfo2 = JSON.parse(loginInfo)
            if (loginInfo2.length !== 0) {

                if (likeSongList) {
                    let likeSongList2 = JSON.parse(likeSongList)
                    if (likeSongList2.length !== 0) {
                         
                        this.recommendSongData = likeSongList2
                        for (let index = 0; index < this.recommendSongData.length; index++) {
                            const element = this.recommendSongData[index];

                            this.likeRecommendListId = this.recommendSongData[0].id

                        }

                        this.getRecommendList(this.likeRecommendListId)


                    }
                }
                if (likeSong) {
                    let likeSong2 = JSON.parse(likeSong)
                    
                   
                     
                        if (likeSong2.length !== 0) {
                            this.numSongList = this.recommendSongData.length
                            this.likeSongData = likeSong2
                            for (let index = 0; index < this.likeSongData.length; index++) {
                                const element = this.likeSongData[index];
                                 

                                this.recommendSongId = this.likeSongData[0].id

                            }
                        }
                }
            }

        }

    },
    methods: {
        ...mapMutations(['setIsMain']),
        onClickLeft() {

            this.$router.back()
        },
        getRecommendList(id) {
            this.axios({
                method: "get",
                url: "/related/playlist",
                params: {
                    id: id
                }
            }).then(res => {


                this.likeRecommendListData = res.data.playlists
            }).catch(err => {

            })
        },
        // 跳转歌单详情页
        getSonDetail(id, url) {
             

            this.setIsMain(false)
            this.$router.push({ name: "RecommendLIstDetail", params: { id, url } })
        },
    }
}
</script>

<style lang="less" scoped>
.like {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: #160742;
    color: #FFFEFF;

    .icon {
        width: 25px;
        height: 25px;
    }

    .van-nav-bar {
        background-color: transparent;
    }

    /deep/.van-nav-bar__title {
        color: #FFFEFF;
    }

    [class*=van-hairline]::after {
        border: none;
    }

    .thrItem {
        width: 94%;
        margin: 0px 3%;
    }

    .allplay {
        display: flex;
        height: 50px;
        align-items: center;
        justify-content: space-between;

        .allplayTwo {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .allplayText {
                margin-left: 8px;
            }

            .img {
                width: 25px;
            }

            .img2 {
                margin-right: 7px;
                width: 18px;
            }

            .img3 {
                margin-left: 10px;
            }
        }
    }

    .recommendSong {
        margin-top: 10px;
        padding: 15px 0px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .left {
            .title {
                font-size: 16px;
                font-weight: bold;
            }

            .desc {
                margin-top: 10px;
                font-size: 10px;
                color: #ddd;
            }
        }

        .right {
            display: flex;

            margin-right: 20px;

            .text {
                margin-right: 10px;
                color: #ddd;
            }

            .btn {
                height: 15px;
                width: 25px;
            }

            /deep/.van-switch {
                height: 100%;
                width: 30px;
            }

            /deep/.van-switch__node {
                left: -8px;
                top: -2px;
                width: 20px;
                height: 20px;
                background-color: #51EDE7;
            }
        }
    }

    .songListDetail {
        width: 94%;
        margin: 0px 3%;

        // .item {
        //     padding: 10px 0px;
        //     height: 60px;
        //     display: flex;
        //     align-items: center;
        //     justify-content: space-between;


        //     .songListDetailImg {
        //         width: 20%;
        //         border-radius: 10px;
        //         overflow: hidden;
        //     }

        //     .songListDetailRight {
        //         width: 5%;
        //     }

        //     .songListDetailTitle {
        //         font-size: 15px;
        //         // height: 20px;
        //         overflow: hidden;
        //         white-space: nowrap;
        //         text-overflow: ellipsis;
        //     }

        //     .songListDetailContent {
        //         // margin-left: 15px;
        //         width: 65%;
        //         font-size: 10px;


        //     }

        //     .songListDetailText {
        //         // height: 15px;
        //         margin-top: 5px;
        //         white-space: nowrap;
        //         overflow: hidden;
        //         text-overflow: ellipsis;
        //         color: rgb(146, 145, 145);
        //     }
        // }
    }

    .recommendListMore {
        margin-top: 20px;

        .recommendListMoreTitle {
            font-size: 14px;
        }

        .recommendListMoreItem {
            margin-top: 10px;
            display: flex;
            // justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;

            .recommendItem {
                width: 105px;
                margin: 5px 6px;

                .recommendPic {

                    width: 105px;

                    img {
                        border-radius: 10px;
                    }
                }

                .recommendText {
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    word-break: break-all;
                    margin-top: 3px;
                }
            }

            .recommendItem:nth-child(3) {
                margin-right: 0px;
            }
        }


    }
}
</style>